<template>
    <w-pop ref="pop" :direction="'btt'" :showHeader="false" :closeModal="false">
        <el-icon class="close_icon" size="52" color="#fff" @click="handleClose">
            <CircleClose />
        </el-icon>
        <div class="ps_container">
            <div class="title">{{ $t("car.sendedit") }}
                <el-popover placement="bottom" :width="300" trigger="click">
                    <template #reference>
                        <el-icon class="tips">
                            <Warning />
                        </el-icon>
                    </template>
                    <div class="tips_content">
                        <div class="tips_item">配送時間：{{ carData.deliveryDay }}</div>
                        <div class="tips_item">
                            取貨方式：{{ carData.deliveryWay }}
                        </div>
                        <div class="tips_item">支付方式：{{ carData.payWay }}</div>
                    </div>
                </el-popover>

            </div>
            <!-- <el-input readonly v-model="params.deliveryTime" size="large" suffix-icon="ArrowRightBold"
                @click="handleOpenDate" style="margin-bottom: 12px;"></el-input> -->
            <el-select v-model="params.deliveryWay" size="large" style="width: 100%;">
                <el-option label="配送" :value="1">
                </el-option>
                <el-option label="自取" :value="2">
                </el-option>
            </el-select>

            <w-button style="width: 100%;margin-top:10px" @click="handleComfirUpdateSend">确认</w-button>

        </div>

        <w-date ref="wdate" @handleClickTime="handleClickTime"></w-date>
    </w-pop>
</template>

<script>
import { defineComponent, ref } from "vue";
import { editCar, selectCare } from '@/api/car'
export default defineComponent({
    props: {},
    components: {},
    setup(props, { emit }) {
        const pop = ref();
        const open = (time, type, productId, id) => {
            pop.value.open();
            params.value.deliveryTime = time
            params.value.deliveryWay = type
            params.value.productId = productId
            params.value.id = id
            initTips()
        };

        const carData = ref({})
        const initTips = async () => {
            const res = await selectCare({ id: params.value.productId })
            console.log(res)
            carData.value = res
        }

        const handleClose = () => {
            pop.value.close();

        }


        const handleOpenDate = () => {
            wdate.value.open()
        }


        const wdate = ref()


        const params = ref({
            id: "",
            productId: "",
            deliveryTime: '',
            deliveryWay: 0,//配送方式 0- 配送，1-自取
        })


        const handleClickTime = (time) => {
            params.value.deliveryTime = time
        }

        const handleComfirUpdateSend = () => {
            emit('handleComfirUpdateSend', params.value)
            handleClose()
        }
        return {
            carData,
            params,
            pop,
            open,
            handleClose,
            wdate,
            handleOpenDate,
            handleClickTime,
            handleComfirUpdateSend
        };
    },
});
</script>

<style scoped lang="scss">
.ps_container {
    height: 160px;
    padding: 16px;

    .title {
        color: #000;
        /* H3 */
        font-family: Helvetica;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 16px;
        position: relative;

        .tips {
            position: absolute;
            right: 0;
        }

    }

}

.tips_content {
    color: #333;
    font-family: Helvetica;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    .tips_item {
        margin-bottom: 24px;
    }

    .tips_item:last-child {
        margin-bottom: 0;
    }
}

.close_icon {
    position: absolute;
    right: 16px;
    top: -80px;
    z-index: 100;
}
</style>
